@use '@angular/material' as mat;
@import '../mixins/amixin';
@import './builder/main-sidebar';
@import './builder/builder-sidebar';
@import './builder/builder-list';
@import './builder/builder-inline-edit';

$dark-primary: mat.m2-define-palette(mat.$m2-gray-palette, 300, 50, 500);
$dark-accent: mat.m2-define-palette(mat.$m2-teal-palette, A200, A100, A400);
$dark-warn: mat.m2-define-palette(mat.$m2-deep-orange-palette);
$dark-theme: mat.m2-define-dark-theme(
  (
    color: (
      primary: $dark-primary,
      accent: $dark-accent,
      warn: $dark-warn,
    ),
    typography: mat.m2-define-typography-config(),
    density: 0,
  )
);

$darkBg: map-get(
  $map: $dark-theme,
  $key: background,
);
$darkFore: map-get(
  $map: $dark-theme,
  $key: foreground,
);
$darkPrimary: map-get(
  $map: $dark-theme,
  $key: primary,
);

@mixin theme($background, $foreground, $primary, $warn) {
  background-color: mat.m2-get-color-from-palette($background, card);
  @include builder-sidebar($background, $foreground, $primary);
  .builder {
    .builder-workspace {
      .builder-toolbar {
        background-color: mat.m2-get-color-from-palette($background, background);
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);
        .left {
          .page-title {
            border-bottom: 1px solid transparent;
            &:focus-visible {
              outline: none;
              border-bottom-color: mat.m2-get-color-from-palette($primary);
            }
          }
        }
        .middle {
          .time {
            color: mat.m2-get-color-from-palette($foreground, text, 0.45);
          }
        }
        &.fixed {
          @include mat.elevation(2, mat.m2-get-color-from-palette($background, tooltip), 0.25);
        }
        .right {
          color: mat.m2-get-color-from-palette($foreground, text, 0.5);
          .mat-unthemed {
            .mdc-button__label {
              color: mat.m2-get-color-from-palette($foreground, text, 0.5);
            }
          }
        }
      }
      .builder-main {
        > .sidebar {
          @include main-sidebar($background, $foreground, $primary);
        }
      }
      > .mat-drawer-container {
        background-color: transparent;
        .builder-list {
          @include builder-list($background, $foreground, $primary, $warn);
        }
      }
      .mat-drawer-content {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.11);
        @include inline-edit($background, $foreground, $primary);
        @include scrollbar(mat.m2-get-color-from-palette($primary));

        .backdrop {
          background-color: mat.m2-get-color-from-palette($foreground, slider-off-active);
        }
        .showcase {
          background-color: mat.m2-get-color-from-palette($background, card);
          > app-card-1v1 {
            > .card-1v1 {
              @include scrollbar(mat.m2-get-color-from-palette($primary));
            }
          }
          .showcase-footer {
            color: mat.m2-get-color-from-palette($foreground, text);
            border-top: 1px solid mat.m2-get-color-from-palette($foreground, divider);
            background: mat.m2-get-color-from-palette($background, background);
            .mat-icon {
              color: mat.m2-get-color-from-palette($primary) !important;
            }
          }
          .component-toolbar {
            + app-spacer {
              background-color: mat.m2-get-color-from-palette($primary, 0.25);
            }
          }
        }
      }
      .cdk-drag-placeholder {
        background-color: mat.m2-get-color-from-palette($background, background);
        border: 3px dotted mat.m2-get-color-from-palette($foreground, divider);
        width: 100%;
        &:hover {
          background-color: mat.m2-get-color-from-palette($primary, 200);
          border-color: mat.m2-get-color-from-palette($primary);
        }
      }
    }
    .mat-drawer {
      .actions {
        &.expand {
          background-color: mat.m2-get-color-from-palette($background, card);
          @include mat.elevation(2, mat.m2-get-color-from-palette($background, hover), 0.4);
        }
      }
    }
  }
}

@mixin code-editor-theme($darkBg, $darkFore, $darkPrimary, $warn) {
  .code-editor-dialog {
    --mdc-dialog-container-color: mat.m2-get-color-from-palette($darkBg, card);
    .dialog {
      .mat-mdc-dialog-content {
        background-color: mat.m2-get-color-from-palette($darkBg, card);
      }
      .monaco-editor,
      .monaco-editor-background,
      .monaco-editor .inputarea.ime-input {
        background-color: #282c34;
      }
      .toolbar {
        background-color: mat.m2-get-color-from-palette($darkBg, app-bar);
      }
    }
  }
}

@mixin builder-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  @include code-editor-theme($darkBg, $darkFore, $darkPrimary, $warn);
  .builder-wrapper {
    @include theme($background, $foreground, $primary, $warn);

    &.dark {
      @include theme($darkBg, $darkFore, $darkPrimary, $warn);
      .builder-list,
      #builder-list {
        background-color: #fafafa !important;
      }
      .mat-drawer {
        &.sidebar-drawer {
          border-right-color: #272727;
        }
        .actions {
          &.expand {
            color: #fafafa;
          }
        }
      }
    }
  }

  .drawer-right {
    .builder-list {
      min-width: 85vw;
    }
  }

  .builder-template {
    .card {
      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
      background-color: mat.m2-get-color-from-palette($background, card);
      transition: all 0.1s ease-in;
      @include mat.elevation(4, mat.m2-get-color-from-palette($foreground, divider), 0.4);
      &:hover {
        border-color: mat.m2-get-color-from-palette($primary);
      }
    }
  }
}
